<template>
  <div>
    <template v-for="(chart, index2) in group.charts" :key="index2">
      <a-card size="small" :title="chart.head.name" style="margin-top: 10px">
        <template #extra>
          <a-button size="small" type="primary" class="ant-btn-background-ghost" ignore-print="true" @click="details(chart.head.id)">详情</a-button>
        </template>
        <group-auto-chart :propsChartData="chart" />
      </a-card>
    </template>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import GroupAutoChart from './GroupAutoChart.vue';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'GroupTemplateCard',
    components: {
      GroupAutoChart,
    },
    props: {
      group: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props, { emit }) {
      let router = useRouter();
      function details(id) {
        router.push({ path: '/online/graphreport/chart/' + id });
      }
      return { details };
    },
  });
</script>
